<template>
  <div>
    <div class="image-preview"  @touchstart="touchStart" @touchend="touchEnd">
        <van-image-preview
            v-model="isShow"
            :images="previewImages"
            :showIndex="true"
            @close="onClose()"
        >
        </van-image-preview>
    </div>
  </div>
</template>

<script>
   import html2canvas from 'html2canvas';
  export default {
    data () {
      return {
        isLongClick: false,
        touchStartX: 0,
        touchStartY: 0,
        isShow: false,
        previewImages: [],
        target_el: ''
      }
    },
    props:["isShowPreview", "images", "el"],
    watch: {
        isShowPreview: function(){ // 监听父组件的变化
            this.isShow = this.isShowPreview
        },
        images: function() {
          this.previewImages = this.images;
        },
        el: function() {
          this.target_el = this.el;
        }
     },
    methods: {
      fnShowImg: function(show) {
        this.isShow = show;
        this.isLongClick = false
      },
      touchStart(event) {
          this.touchStartX = event.changedTouches[0].clientX // this.touchStartX按下时的横轴坐标
          this.touchStartY = event.changedTouches[0].clientY // this.touchStartY按下时的纵轴坐标
          setTimeout(() => {
              if (this.isShowPreview) {
                  this.isLongClick = true // this.isLongClick用于标识是否是长按事件
              }
          }, 1000)
      },
      touchEnd() {
          this.touchEndX = event.changedTouches[0].clientX // this.touchEndX释放时的横轴坐标
          this.touchEndY = event.changedTouches[0].clientY // this.touchEndY释放时的纵轴坐标
          if (Math.abs(this.touchEndX - this.touchStartX) < 10 && Math.abs(this.touchEndY - this.touchStartY) < 10 && this.isLongClick) {
              this.dialogAlert()
              this.isLongClick = false
          }
      },
      dialogAlert() { // 该方法是长按弹出的保存图片对话框，用到vant中Dialog组件
          this.$dialog.confirm({
            title: '保存图片',
            message: '',
          })
          .then(() => {
            this.fnSaveImage()
            // on confirm
          })
          .catch(() => {
            this.isShow = false;
            this.$emit('fnShowPreview', this.isShow) // 将改变通知父组件(保证父子组件数据一致)
            // on cancel
          });
      },
      onClose () {
        this.isLongClick = false
        this.isShow = false;
        // this.$emit('fnShowPreview', this.isShow) // 将改变通知父组件(保证父子组件数据一致)
      },
      fnSaveImage: function () {

          var blob=new Blob([''], {type:'application/octet-stream'});

          var url = this.previewImages[0].createObjectURL(blob);

          var a = document.createElement('a');

          a.href = this.previewImages[0];

          a.download = this.previewImages[0].replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];

          var e = document.createEvent('MouseEvents');

          e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

          a.dispatchEvent(e);

          URL.revokeObjectURL(url);
      }
    }
  }
</script>

<style>
</style>
